﻿/// <reference path="uicontrol.ts" />

module UI {

    export class ComboBox extends UIControl {

        public type: string = 'ComboBox';

        public items: Array<ListBoxItem> = [];

        public selectedIndex: number = -1;

        public onClick: InputEvent = null;

        public onEnter: InputEvent = null;

        public onExit: InputEvent = null;

        public onSelectedItemChanged: SelectionChangedEvent = null;

        constructor(details: any = undefined) {
            super();
            setupControl(this, details);
            this.handleClick = this.handleClickInternal;
        }

        public selectByValue(value: string) {
            this.selectedIndex = -1;
            for (var i = 0; i < this.items.length; i++) {
                if (this.items[i].text == value) {
                    this.selectedIndex = i;
                    break;
                }
            }
        }

        public getSelectedValue(): string {
            return this.selectedIndex == -1 ? null : this.items[this.selectedIndex].text;
        }

        render(context: CanvasRenderingContext2D): void {

            var c = this.computed;

            // Colours based on state
            var stroke = UI.theme.colors.default.outline;
            var fill = UI.theme.colors.default.face;
            var text = UI.theme.colors.default.faceText;
            if (c.state == ControlState.hover) {
                stroke = UI.theme.colors.hover.outline;
                fill = UI.theme.colors.hover.face;
                text = UI.theme.colors.hover.faceText;
            }
            if (c.state == ControlState.down) {
                stroke = UI.theme.colors.down.outline;
                fill = UI.theme.colors.down.face;
                text = UI.theme.colors.down.faceText;
            }
            if (this.enabled === false) {
                stroke = UI.theme.colors.disabled.outline;
                fill = UI.theme.colors.disabled.face;
                text = UI.theme.colors.disabled.faceText;
            }

            // Outline
            context.lineWidth = 2;
            context.fillStyle = fill;
            context.fillRect(c.left, c.top, c.width, c.height);
            context.strokeStyle = stroke;
            context.strokeRect(c.left, c.top, c.width, c.height);

            // Caption
            if (this.selectedIndex >= 0 && this.selectedIndex < this.items.length) {
                var selectedItem = this.items[this.selectedIndex];
                context.textBaseline = 'middle';
                context.textAlign = 'left';
                context.font = UI.theme.fonts.normal;
                context.fillStyle = text;
                context.fillText(selectedItem.text, c.left + 8, c.middle);
            }
        }

        handleClickInternal(sender: UI.UIControl, e: UI.InputArgs) {
            this.selectedIndex++;
            if (this.selectedIndex >= this.items.length) {
                this.selectedIndex = 0;
            }
            if (this.onSelectedItemChanged !== undefined && this.onSelectedItemChanged !== null) {
                this.onSelectedItemChanged(this, SelectionChangedArgs.create(this.selectedIndex, this.items[this.selectedIndex]));
            }
        }

    }

}